<template>
    <div class="block text-center">
        <el-carousel>
            <el-carousel-item v-for="(item, index) in imgs" :key="index">
                <h3 class="justify-center" text="2xl"><img :src="item"></h3>
            </el-carousel-item>
        </el-carousel>
    </div>

    <div style="margin: 20px 0px;">
        <el-tabs
            v-model="activeName"
            type="card"
            class="demo-tabs"
        >
            <el-tab-pane label="全部商品" name="first">
                <div class="goods-wrapper">
                    <el-card
                    v-for="good in goods"
                    :key="good.id"
                    :body-style="{ padding: '0px' }"
                    class="goods-card"
                    >
                    <img :src="good.goods_icon" class="goods-img" @click="detail(good.id)"/>
                    <div class="goods-info">
                        <p class="goods-desc">{{ good.goods_desc }}</p>
                        <p class="goods-price">¥{{ good.goods_price }}</p>
                        <button @click="addCart(good.id)">加入购物车</button>
                    </div>
                    </el-card>
                </div>
            </el-tab-pane>
            <el-tab-pane label="电脑专区" name="second">
                <div class="goods-wrapper">
                    <el-card
                    v-for="good in computers"
                    :key="good.id"
                    :body-style="{ padding: '0px' }"
                    class="goods-card"
                    >
                    <img :src="good.goods_icon" class="goods-img" @click="detail(good.id)"/>
                    <div class="goods-info">
                        <p class="goods-desc">{{ good.goods_desc }}</p>
                        <p class="goods-price">¥{{ good.goods_price }}</p>
                        <button @click="addCart(good.id)">加入购物车</button>
                    </div>
                    </el-card>
                </div>
            </el-tab-pane>
            <el-tab-pane label="手机专区" name="third">
                <div class="goods-wrapper">
                    <el-card
                    v-for="good in photos"
                    :key="good.id"
                    :body-style="{ padding: '0px' }"
                    class="goods-card"
                    >
                    <img :src="good.goods_icon" class="goods-img" @click="detail(good.id)"/>
                    <div class="goods-info">
                        <p class="goods-desc">{{ good.goods_desc }}</p>
                        <p class="goods-price">¥{{ good.goods_price }}</p>
                        <button @click="addCart(good.id)">加入购物车</button>
                    </div>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>
    
    </div>
   
</template>

<script setup name="Main">
    import { ref } from 'vue';
    import request from '../../../myvue/src/utils/request';
    import { useRouter } from 'vue-router';
    import { ElMessage } from 'element-plus'

    const router = useRouter();

    const activeName = ref('first')

    const imgs = ref([
        '../../../public/swiper1.jfif',
        '../../../public/swiper2.jfif',
        '../../../public/swiper3.jfif'
    ]);

    let goods = ref([]);
    let computers = ref([]);
    let photos = ref([]);
    
    function getComputers() {
        let api = '/goods/getGoodsPage'
        request({
            url: api,
            method: 'get',
            params: {
                goods_category : 0,
                currentPage : 1,
                pageSize : 4,
            }
        }).then(res => {
            computers.value = res.data
            goods.value.push(...res.data)
        })
    }
    getComputers()

    function getPhotos() {
        let api = '/goods/getGoodsPage'
        request({
            url: api,
            method: 'get',
            params: {
                goods_category : 1,
                currentPage : 1,
                pageSize : 4,
            }
        }).then(res => {
            photos.value = res.data
            goods.value.push(...res.data)
        })
    }
    getPhotos()

    function addCart(id) {
        let api = '/cart/addCart'
        request({
            url: api,
            method: 'get',
            params: {
                username: localStorage.getItem('UserName'),
                goods_id: id,
                quantity: 1,
            }
        }).then(res => {
            ElMessage.success('添加成功')
        })
    }

    function detail(id) {
        router.replace(`/index/detail/${id}`)
    }
</script>

<style scoped>
.goods-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
}

.goods-card {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s;
}
.goods-card:hover {
  transform: translateY(-4px);
}

.goods-img {
  width: 100%;
  height: 100%;
}

.goods-info {
  padding: 12px;
  text-align: center;
}
.goods-desc {
  font-size: 14px;
  color: #333;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goods-price {
  font-size: 16px;
  font-weight: 600;
  color: #ff5000;
  margin: 0 0 10px;
}

/* 按钮 */
button {
    padding: 8px 50px;
    margin: 0px 5px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    background-color: rgb(252, 25, 25);
    color: #fff;
    cursor: pointer;
}
button:hover {
    background-color: rgb(255, 102, 102);
}
button:active {
    background-color: rgb(255, 0, 0);
}
</style>